7<template>
  <div>
    <!-- 搜索栏区域 -->
    <el-card class="SearchCard"
             body-style="padding:0px">
      <el-row>
        <el-col :span="2">
          <div class="SearchTitle">条件搜索栏</div>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">搜索关键字</div>
            </el-col>
            <el-col :span="14">
              <div class="SearchLable">
                <el-input placeholder="请输入内容"
                          v-model="queryInfo.srm"
                          clearable
                          @clear="clearEvent"></el-input>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="4">
          <el-row>
            <el-col :span="10">
              <div class="SearchLable">选择西药/中药</div>
            </el-col>
            <el-col :span="14">
              <div class="SearchLable">
                <el-select v-model="DrugType">
                  <el-option v-for="item in Typeoptions"
                             :key="item.value"
                             :label="item.label"
                             :value="item.value">
                  </el-option>
                </el-select>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="2">
          <div class="SearchLable">
            <el-button size="medium"
                       type="primary"
                       @click="getSearchList()">搜索</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="TableCard"
             :body-style="{ padding: '0px' }">
      <div>
        <el-table :data="tableData"
                  border
                  :header-cell-style="{ 'text-align':'center',background: '#3F9DFD', color: '#FFF' }"
                  :cell-style="{'text-align':'center'}"
                  size="medium"
                  stripe
                  style="width: 100%;font-size:12px">
          <el-table-column prop="drugCode"
                           label="药品编码"
                           width="100"></el-table-column>
          <!-- <el-table-column prop="name"
                           label="操作"
                           width="60">
            <el-button type="text"
                       size="mini"
                       @click="dialogVisible = true">编辑</el-button>
          </el-table-column>-->
          <el-table-column label="操作"
                           width="108">
            <template slot-scope="scope">
              <el-button v-if="scope.row.piDrugId==0"
                         type="text"
                         @click="dialogVisible = true">添加</el-button>
              <div v-else>
                <el-button type="text"
                           @click="showInstruction(scope.row.piDrugId,scope.row.drugCode,scope.row.nameType)">查看</el-button>
                <el-button type="text"
                           class="deleteButton"
                           style="color: red;margin-left: 20px;"
                           @click="Tips(scope.row.piDrugId,scope.row.nameType)">删除</el-button>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="drugName"
                           label="药品名称"></el-table-column>

          <el-table-column prop="cbrand"
                           label="商品名"></el-table-column>
          <el-table-column label="药品类型">
            <template slot-scope="scope">
              <div v-if="scope.row.nameType==8">西药</div>
              <div v-else-if="scope.row.nameType==2">草药</div>
              <div v-else-if="scope.row.nameType==6">中成药</div>
            </template>
          </el-table-column>
          <el-table-column prop="drugSpec"
                           label="药品规格"></el-table-column>
          <el-table-column prop="compName"
                           label="药品生产厂家"></el-table-column>
          <el-table-column prop="approvalCode"
                           label="批准文号"></el-table-column>
        </el-table>
      </div>
      <div class="block">
        <el-pagination @size-change="handleSizeChange"
                       @current-change="handleCurrentChange"
                       :current-page="queryInfo.pagenum"
                       :page-sizes="[20, 50, 100]"
                       :page-size="queryInfo.pageSize"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="this.total"
                       background></el-pagination>
      </div>
    </el-card>
    <!-- 说明书dialog -->
    <el-dialog class="showDialog"
               :title="this.InstrucList.title"
               :visible.sync="dialogVisible"
               width="50%"
               :before-close="handleClose">
      <div style="overflow-x: scroll;height:550px;">
        <el-card class="dialog-card2"
                 style="width:100%">
          <el-collapse v-model="activeNames"
                       @change="handleChange">
            <el-collapse-item v-for="(apply,index) in InstrucList.parms"
                              :key="index"
                              :title="apply.title"
                              :name="1">
              <div>
                <p v-html="apply.content"></p>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>
      </div>

      <span slot="footer"
            class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  getInstructionXY,
  showInformationPixy,
  deleteInstrucXY
} from "@/api/rad";
export default {
  data () {
    return {
      queryInfo: {
        srm: "",
        page: 1,
        pageSize: 20
      },
      total: 0,
      DrugType: 1,
      tableData: [],
      dialogVisible: false,
      InstrucList: [],
      activeNames: ["1"],
      Typeoptions: [
        {
          label: "西药",
          value: 1
        },
        {
          label: "中药",
          value: 0
        }
      ]
    };
  },
  created: function () {
    this.getInstruction();
  },
  methods: {
    handleSizeChange (newSize) {
      this.queryInfo.pageSize = newSize;
      this.getInstruction();
    },

    handleCurrentChange (newPage) {
      this.queryInfo.page = newPage;
      this.getInstruction();
    },
    handleClose (done) {
      done();
    },
    handleChange (val) {
      // console.log(val);
    },
    async getInstruction () {
      if (this.DrugType == 1) {
        let res = await this.$rad.getInstructionXY({
          srm: this.queryInfo.srm,
          page: this.queryInfo.page,
          pageSize: this.queryInfo.pageSize
        });
        (this.tableData = res.rows), (this.total = res.total);
        console.log(res.rows);
      } else if (this.DrugType == 0) {
        let res = await this.$rad.getInstructionZY({
          srm: this.queryInfo.srm,
          page: this.queryInfo.page,
          pageSize: this.queryInfo.pageSize
        });
        (this.tableData = res.rows), (this.total = res.total);
        console.log(res.rows);
      }

    },
    async showInstruction (piDrugId, drugCode, nameType) {
      console.log(piDrugId, drugCode, nameType);
      if (nameType == 8 || nameType == 6) {
        let res = await this.$rad.showInformationPixy({
          piDrugId: piDrugId,
          drugCode: drugCode
        });
        this.InstrucList = res.data;
        console.log(res.data);
      } else {
        let res = await this.$rad.showInformationPizy({
          piDrugId: piDrugId,
          drugCode: drugCode
        });
        this.InstrucList = res.data;
        console.log(res.data);
      }

      this.dialogVisible = true;
      // this.InstrucList = res.data;
      // console.log(res.data);
    },
    getSearchList () {
      this.getInstruction();
    },
    clearEvent () {
      this.getInstruction();
    },
    Tips (piDrugId, nameType) {
      this.$confirm("此操作将永久删除该说明书, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.deleteInstruction(piDrugId, nameType);
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    async deleteInstruction (piDrugId, nameType) {
      if (nameType == 8 || nameType == 6) {
        let res = await this.$rad.deleteInstrucXY({
          piDrugId: piDrugId
        });
        if (res.code == 1) {
          return this.$message({
            type: "success",
            message: res.msg
          });
        } else {
          return this.$message({
            type: "error",
            message: res.msg
          });
        }
      } else {
        let res = await this.$rad.deleteInstrucZY({
          piDrugId: piDrugId
        });
        if (res.code == 1) {
          return this.$message({
            type: "success",
            message: res.msg
          });
        } else {
          return this.$message({
            type: "error",
            message: res.msg
          });
        }
      }

      console.log(res);
    }
  }
};
</script>
<style scoped>
.SearchCard {
  height: 50px;
  font-size: 12px;
}
.SearchTitle {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
  border-right: 1px solid #c2c2c2;
}
.SearchLable {
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.TableCard {
  margin-left: 3px;
  margin-top: 2px;
}
.block {
  text-align: center;
  margin-top: 12px;
  margin-bottom: 12px;
}
</style>